<form id="menusaddfm" method="post" style="padding: 0 8px 15px 0;">
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable">
        <tr bgcolor="#FFFFFF">
            <td  class="tlabel" width="10%">所属菜单组：</td>
            <td width="90%">
                <select v-model="params.up" class="forminput inputstyle textbox-text validatebox-text">
                    <option value=0>--主菜单--</option>
                    <option disabled>----------</option>
                    <template v-for="(vo,index) in mainMenu">
                        <option :value="vo.id">{{vo.name}}</option>
                        <template v-for="(vo1,idx1) in vo.children">
                            <option :value="vo1.id">&nbsp;&nbsp;&nbsp;|--{{vo1.name}}</option>
                        </template>
                    </template>
                </select>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td  class="tlabel">菜单名称：</td>
            <td><input v-model="params.name" type="text" style="width:400px;"
                                   class="forminput inputstyle textbox-text validatebox-text textbox-prompt easyui-validatebox"
                                   placeholder="自定义菜单名称.." required="true"></td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">菜单链接：</td>
            <td>
                <input type="text" v-model="params.links" value="" style="width:400px;" class="forminput inputstyle textbox-text"/>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">图标：</td>
            <td>
                <span style="height: 28px; width: 50px; display: inline-block; text-align: center;">
                    <i style="font-size: 18px;width:18px;height:18px;color: #FF3300;" :class="'iconfont '+params.icon"></i>
                </span>
                <input type="button" style="height: 28px;border-radius:3px;width: 80px;border: #c1c1c1 1px solid;" @click="toselect" value="选择">
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td  class="tlabel">排序：</td>
            <td>
                <input type="text" v-model="params.sortorder" value="500" class="forminput inputstyle textbox-text"/>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >控制器：</td>
            <td>
                <select v-model="params.controller" @change="onChangeController" class="forminput inputstyle textbox-text">
                    <option value=''>--请选择--</option>
                    <option disabled>----------</option>
                    <template v-for="(vo,index) in authList">
                        <option :value="vo.value">{{vo.name}}</option>
                    </template>
                </select>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >权限表：</td>
            <td>
                <ul id="menusaddAct" name="act_ids"></ul>
                <input type="hidden" name="act_ids" id="menusadd_act_ids"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" bgcolor="#F4F4F4" style="border-top:#ddd 1px solid;text-align:right; padding-right:25px;">
                <div>
                    <a href="javascript:;" class="l-btn l-btn-small" id="menusaddsubmit"><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">保存</span><span class="l-btn-icon icon-ok">&nbsp;</span></span></a>
                    <a href="javascript:;" class="l-btn l-btn-small" id="menusaddclearForm"><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">关闭</span><span class="l-btn-icon icon-no">&nbsp;</span></span></a>
                </div>
            </td>
        </tr>
    </table>
</form>
<script>
    var menusaddVm = new Vue({
        el: '#menusaddfm',
        data: {
            params: {
                up: '',
                name: '',
                icon: '',
                links: '',
                module: '<?php echo $module;?>',
                controller: '',
                actions: '',
                sortorder: 500,
            },
            hasAct: false,
            authList: JSON.parse("<?php echo addslashes(json_encode($authlist));?>"),
            mainMenu: JSON.parse("<?php echo addslashes(json_encode($mainMenu));?>"),
        },
        methods: {
            init: function () {
            },
            onChangeController() {
                $.post('/admin/system/getacts', {module: menusaddVm.params.module, controller: menusaddVm.params.controller, id: menusaddVm.params.id}, function (data) {
                    if (data.ret == 0) {
                        $("#menusaddAct").tree({
                            data: data.data,
                            checkbox: true,
                            lines: true,
                        });
                        menusaddVm.hasAct = true;
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                }, 'json');
            },
            toselect() {
                $("#iconlistdlg").dialog({
                    title: '选择图标',
                    closed: false,
                    width: 715,
                    height: 420,
                    cache: false,
                    href: '/admin/icon/list',
                    modal: true,
                    buttons: [{
                        text: '确定',
                        id: 'iconlistsubmit',
                        iconCls: 'icon-ok',
                        handler: function() {
                            menusaddVm.params.icon = iconlistVm.selected;
                            $("#iconlistdlg").dialog('close');
                        }
                    }, {
                        text: '关闭',
                        iconCls: 'icon-no',
                        handler: function () {
                            $("#iconlistdlg").dialog('close');
                        }
                    }]
                });
            }
        }
    });
    menusaddVm.init();
    $(function () {
        $('#menusaddsubmit').click(function () {
            if(menusaddVm.hasAct) {
                menusaddVm.params.actions = getTreeChecked('#menusaddAct');
            }
            $.post('/admin/system/menusadd', menusaddVm.params, function (data) {
                if (data.ret == 0) {
                    $.messager.show({
                        title: '提示',
                        msg: data.msg,
                        timeout: 3000,
                        showType: 'slide'
                    });
                    $('#menusaddfm').form('clear');
                    $('#rightTabs').tabs('close', '新增后台菜单');
                    if (typeof adminmenusReload == "function") {
                        adminmenusReload();
                    }
                } else {
                    $.messager.alert('提示', data.msg, 'warning');
                }
            }, 'json');
        });
        $('#menusaddclearForm').click(function () {
            $('#menusaddfm').form('clear');
            $('#rightTabs').tabs('close', '新增后台菜单');
        });
    });
</script>
